<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="../../favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WebDrawing touch for mobile device.</title>
<link type="text/css" rel="stylesheet" href="css/colorPicker.css">
<link type="text/css" rel="stylesheet" href="css/cad.css">
</head>

<body>

	<div class="cad">
	<div>
	<div id=crd></div>
	 <button onclick='ctx.restore()'>Restore</button>
	 <input id=scale size=5>
	 <a href='#control'>Control</a>
	</div>
		
		<div id=canvas>
			<canvas></canvas>
			<canvas></canvas>
		</div>
		
		<div class="control" id='control'>

			<div>
				<h4>Elements <a href='#crd'>Back</a></h4>
				<!-- <button onclick="ctx.setMode('view');">View</button>
				<button onclick="ctx.setMode('select');">Select</button> -->
				<button onclick="ctx.drawUsing(hc.graphic.Line.creator)" title="Draw a path, press mouse to add a point to the path. Press C to end path, alt+C to close path.">Line</button>
				<button onclick="ctx.drawUsing(hc.graphic.Circle.creator)" title="Drag to create circle">Circle</button>
				<button onclick="ctx.drawUsing(hc.graphic.Rectangle.creator)" title="Drag to create rectangle">Rectangle</button>
				<button onclick="ctx.drawUsing(hc.graphic.QuadraticCurve.creator)" title="Drag to create a line, then drag to control the curve">QuadraCurve</button>
			</div>

			<div>
				<h4>Style</h4>
				<span>Fill:</span>
				<button onclick="clearFill()">
				Clear
				</button>
				<label>Color:<input id="fillColor">
				</label><br> <span>Out line:</span>
				<button onclick="clearStroke();">
				Clear
				</button>
				<label>Color:<input id="strokeColor">
				</label>
			</div><div>
				<h4>Line Style</h4>
				Line width:<input
					onchange="ctx.drawable.style.lineWidth=this.value;" value="9"
					size="3" /> <label>Line Cap: <select
					onchange="ctx.drawable.style.lineCap=this.value;">
						<option value="butt">butt</option>
						<option value="round">round</option>
						<option value="square">square</option>
				</select> </label> <label>Line join: <select
					onchange="ctx.drawable.style.lineJoin=this.value;">
						<option value="miter">miter</option>
						<option value="round">round</option>
						<option value="bevel">bevel</option>
				</select> </label> <label>miterLimit: <input
					onchange="ctx.drawable.style.miterLimit=this.value;" value="10"
					size="3"> </label>
			</div>
			
			

			<div>
				<h4>Compositing</h4>

				<span>Alpha transparent:</span> <input type="range" min='0' max='1'
					value="1" step='0.1'
					onchange="this.title=this.value;ctx.context2d.globalAlpha=this.value;"
					id="globalAlpha" /> <br /> <label> Composite operation: <select>
						<option>source-atop</option>
						<option>source-in</option>
						<option>source-out</option>
						<option>source-over</option>
						<option>destination-atop</option>
						<option>destination-in</option>
						<option>destination-out</option>
						<option>destination-over</option>
						<option>lighter</option>
						<option>copy</option>
						<option>xor</option>
						<option>vendorName-operationName</option>
				</select> </label>
			</div>

		</div>
	</div>
	<p>
		Scroll the wheel to scale the whole graph. Hold ctrl key and drag to move the whole graph.
	</p>
	<p>Tested display:480*320</p>
</body>
<script src="js/core.js"></script>
<script src="js/colorPicker.js"></script>
<script src="js/graphics.js"></script>
<script src="js/circle.js"></script>
<script src="js/curve.js"></script>
<script src="js/line.js"></script>
<script src="js/rect.js"></script>

<script type="text/javascript">
	try {
		var ctx = new hc.graphic.DrawingContext(document.getElementById('canvas'));
		var crdLabel=document.getElementById('crd');
		crdLabel.innerHTML='';
		var crdText=document.createTextNode('000.00, 000.00');
		crdLabel.appendChild(crdText);
		ctx.onCursorMove=function(x,y){
			var n=5;//n digits
			crdText.nodeValue=x.toPrecision(n)+', '+y.toPrecision(n);
		}
	
		var scale=document.getElementById('scale');
		scale.min=ctx.scaleRange.min;
		scale.max=ctx.scaleRange.max;
		scale.onchange=function(){
			ctx.scale=this.value;
			ctx.modelContext2d.lineWidth=1/ctx.scale;
			ctx.repaint();
			this.title=(this.value*100).toFixed(1)+'%';
		}
		ctx.onScale=function(sc){
			scale.value=sc;
			scale.title=(sc*100).toFixed(1)+'%';
		}
		
		var picker = new hc.widget.ColorPicker();
		var fce=document.getElementById('fillColor');//fill color element
		var sce=document.getElementById('strokeColor');//stroke color element
		picker.regist(fce);
		picker.regist(sce);
		fce.onchange = function() {
			for(var i in ctx.selected){
			ctx.selected[i].style.fillStyle=this.value;	
			}
			ctx.repaintTop();
		}
		sce.onchange = function() {
			for(var i in ctx.selected){
				ctx.selected[i].style.strokeStyle=this.value;	
			}
			ctx.repaintTop();
		}
		function clearFill(){
			for(var i in ctx.selected){
				delete ctx.selected[i].style.fillStyle;
				}
				ctx.repaintTop();
		}
		function clearStroke(){
			for(var i in ctx.selected){
				delete ctx.selected[i].style.strokeStyle;
				}
		}
	} catch (e) {
		var m = 'Error!';
		for ( var p in e) {
			m += '\n' + p + ':' + e[p];
		}
		alert(m);
	}
</script>
</html>
